<!-- 添加修改栏目 -->
<template>
  <div class='modifyColumn'>
    <el-card class="box-card">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="modifyColumn-ruleForm">
        <el-form-item label="栏目类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio :label="1">单文章</el-radio>
            <el-radio :label="2">多文章</el-radio>
            <el-radio :label="3">超链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="栏目名称" prop="name">
          <el-input v-model="ruleForm.name" maxlength="10" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="父级栏目" prop="navCode">
          <!-- <el-select v-model="ruleForm.parentColumn" placeholder="请选择活动区域">
            <el-option label="/" value="1"></el-option>
            <el-option label="/首页" value="2"></el-option>
            <el-option label="/找工作" value="3"></el-option>
            <el-option label="/招聘会" value="4"></el-option>
            <el-option label="/信息公开" value="5"></el-option>
            <el-option label="/事务代理" value="6"></el-option>
            <el-option label="/党员之家" value="7"></el-option>
            <el-option label="/政务公开" value="8"></el-option>
          </el-select> -->

          <el-select v-model="ruleForm.navCode" clearable placeholder="请选择">
            <el-option v-for="(item,key) in navCode" :key="item" :label="item" :value="key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="栏目排序" prop="orderNo">
          <el-input v-model.number="ruleForm.orderNo" type="number" oninput="value.replace(/[^\d]/g,'')" max="11">
          </el-input>
        </el-form-item>

        <el-form-item v-if="ruleForm.type == 1" label="文章内容" prop="content">
          <!-- <Tinymce v-model="ruleForm.content" :height="380"></Tinymce> -->
          <vue-ueditor-wrap v-model="ruleForm.content" :config="ueConfig"></vue-ueditor-wrap>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == 3" label="跳转链接" prop="url">
          <el-input v-model="ruleForm.url"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确认<span
              v-if="$route.query.type == 'add'">提交</span><span v-else>修改</span> </el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Tinymce from '../../common/Tinymce' // 引入富文本编辑
import VueUeditorWrap from 'vue-ueditor-wrap'
import { newsMenuCode, newsMenuSave, newEditInfo, newsMenuUpdate } from '../../../api/columnManagement';
//定义一个全局的变量
var validNum = (rule, value, callback) => {
  if (value == 0 || value > 100) {
    callback(new Error('排序范围只能在1~100之间'))
  } else {
    callback()
  }
}
export default {
  components: {
    Tinymce,
    VueUeditorWrap
  },

  data () {
    return {
      ueConfig: {
        toolbars: [
          // [
          //   'undo', //撤销
          //   'bold', //加粗
          //   'indent', //首行缩进
          //   'italic', //斜体
          //   'underline', //下划线
          //   'strikethrough', //删除线
          //   'subscript', //下标
          //   'fontborder', //字符边框
          //   'superscript', //上标
          //   'formatmatch', //格式刷
          //   'fontfamily', //字体
          //   'fontsize', //字号
          //   'justifyleft', //居左对齐
          //   'justifycenter', //居中对齐
          //   'justifyright', //居右对齐
          //   'justifyjustify', //两端对齐
          //   'insertorderedlist', //有序列表
          //   'insertunorderedlist', //无序列表
          //   'lineheight',//行间距
          // ]
          [
            "source",
            "|",
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "cleardoc",
            "|",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "|",
            "customstyle",
            "paragraph",
            "fontfamily",
            "fontsize",
            "|",
            "directionalityltr",
            "directionalityrtl",
            "indent",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "|",
            "touppercase",
            "tolowercase",
            "|",
            "link",
            "unlink",
            "anchor"
          ]

        ],
        'fontfamily': [
          { label: '', name: 'songti', val: '宋体,SimSun' },
          { label: '仿宋', name: 'fangsong', val: '仿宋,FangSong' },
          { label: '仿宋_GB2312', name: 'fangsong', val: '仿宋_GB2312,FangSong' },
          { label: '', name: 'kaiti', val: '楷体,楷体_GB2312, SimKai' },
          { label: '', name: 'yahei', val: '微软雅黑,Microsoft YaHei' },
          { label: '', name: 'heiti', val: '黑体, SimHei' },
          { label: '', name: 'lishu', val: '隶书, SimLi' },
          { label: '', name: 'andaleMono', val: 'andale mono' },
          { label: '', name: 'arial', val: 'arial, helvetica,sans-serif' },
          { label: '', name: 'arialBlack', val: 'arial black,avant garde' },
          { label: '', name: 'comicSansMs', val: 'comic sans ms' },
          { label: '', name: 'impact', val: 'impact,chicago' },
          { label: '', name: 'timesNewRoman', val: 'times new roman' }
        ],
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口
        enableAutoSave: false,
        elementPathEnable: false,
        wordCount: false,
        UEDITOR_HOME_URL: '/zsrc/UEditor/'
      },
      ruleForm: {
        type: 1,
        name: '',
        navCode: '',
        content: '',
        orderNo: '',
        url: ''
      },
      rules: {
        type: [
          { required: true, message: '请选择栏目类型', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入栏目名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        navCode: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        orderNo: [
          { required: true, message: '请设置父级排序', trigger: 'blur' },
          { type: 'number', message: '只能输入数字', trigger: 'blur' },
          { required: true, validator: validNum, trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请添加跳转链接', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写内容', trigger: 'blur' }
        ]
      },
      navCode: {}
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 单文章提交
    submitForm (formName) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.2)'
      });
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.navCode = Number(this.ruleForm.navCode)
          this.ruleForm.type = Number(this.ruleForm.type)
          this.ruleForm.content = encodeURI(this.ruleForm.content)
          if (this.$route.query.type == 'add') {
            newsMenuSave(this.ruleForm).then(res => {
              if (res.success) {
                loading.close()
                this.$message.success('添加成功')
                this.resetForm('ruleForm')
                this.$router.go(-1)
              } else {
                this.$message.error(res.msg)
                loading.close()
              }
            })
          } else {
            newsMenuUpdate(this.ruleForm).then(res => {
              if (res.success) {
                loading.close()
                this.$message.success('修改成功')
                this.resetForm('ruleForm')
                this.$router.go(-1)
              } else {
                this.$message.error(res.msg)
                loading.close()
              }
            })
          }

        } else {
          console.log('error submit!!');
          loading.close()
          return false;
        }
      });
    },
    resetForm (formName) {
      this.ruleForm.content = ''
      this.$refs[formName].resetFields();

    },
    // 获取父级菜单
    newsMenuCode () {
      newsMenuCode().then(res => {
        if (res.success) {
          this.navCode = res.data
        }
      })
    },
    // 查询新闻编辑信息
    newEditInfo (id) {
      newEditInfo(id).then(res => {
        if (res.success) {
          console.log(res.data, '78956145632')
          this.ruleForm = res.data
          // this.ruleForm.name = res.data.title
          this.ruleForm.navCode = res.data.navCode + ''
          this.ruleForm.content = decodeURI(res.data.content)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
  created () {
    this.newsMenuCode()
    if (this.$route.query.type == 'edit') {
      this.newEditInfo(this.$route.query.id)
    }

  },
  mounted () {

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.modifyColumn-ruleForm {
    width: 60%;
}
</style>